<template>
  <div>
    <a-button type="primary" @click="change">change</a-button>
    <a-divider></a-divider>
    <KeepAlive>
      <component :is="activeComponent"></component>
    </KeepAlive>
  </div>
</template>

<script>
import { shallowRef } from "vue";
import ChildA from "./ChildA.vue";
import ChildB from "./ChildB.vue";
export default {
  data() {
    return {
      activeComponent: shallowRef(ChildA),
      hiddenComponent: shallowRef(ChildB),
    };
  },
  methods: {
    change() {
      [this.activeComponent, this.hiddenComponent] = [
        this.hiddenComponent,
        this.activeComponent,
      ];
    },
  },
};
</script>

<style></style>
